<template>
  <div>
    <!--banner-->
    <div class="banner-con" v-show="indexBanner.banner && indexBanner.banner.length > 0">
      <div class="banner">
        <Swiper
            :modules="modules"
            @swiper="onSwiper"
            :slidesPerView="1"
            :autoplay="{ delay: 2500, disableOnInteraction: false }"
            :loop="true"
            :pagination="{ clickable: true }"
            :space-between="10"
        >
          <swiper-slide v-for="item in indexBanner.banner">
            <img :src="item.image" alt="" @click="bannerClick(item.path)">
          </swiper-slide>
        </Swiper>
      </div>
    </div>
    <!--banner-->

    <!--数据统计-->
<!--    <div class="statistics-index">-->
<!--      <div class="statistics-con">-->
<!--        <div class="statisticsOne">-->
<!--          <img src="@/assets/image/icon1.svg">-->
<!--          <div class="statistics-text">-->
<!--            <span>{{ indexBanner.cooperation }}</span>-->
<!--            <label>平台合作数量</label>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="statisticsOne">-->
<!--          <img src="@/assets/image/icon2.svg">-->
<!--          <div class="statistics-text">-->
<!--            <span>{{ indexBanner.developer }}</span>-->
<!--            <label>平台开发者数量</label>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="statisticsOne">-->
<!--          <img src="@/assets/image/icon3.svg">-->
<!--          <div class="statistics-text">-->
<!--            <span>{{ indexBanner.activity }}</span>-->
<!--            <label>平台活动数量</label>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="statisticsOne">-->
<!--          <img src="@/assets/image/icon4.svg">-->
<!--          <div class="statistics-text">-->
<!--            <span>{{ indexBanner.docking }}</span>-->
<!--            <label>平台对接数量</label>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <!--数据统计-->

    <!--搜索-->
    <div class="search-con">
      <div class="max-w-main">
        <div class="w-full py-5 flex">
          <div class="flex-1 flex items-center">
            <span class="find_exchange pc-show">找合作</span>
            <div class="text-base flex flex-1 items-center search-index">
              <input placeholder="请输入您要搜索的内容" class="px-5 py-3 outline-none flex-1" v-model="requirementData.requirementTitle">
              <button class="searchBut" @click="searchFun">
                <el-icon>
                  <Search />
                </el-icon>
              </button>
            </div>
          </div>
          <button type="button" class="release-button pc-show" @click="clickPublish"><span>发布合作信息</span></button>
        </div>
      </div>
    </div>
    <!--搜索-->


    <!--筛选条件-->
    <div class="screen">
      <div class="screen-con">
        <div class="screen-one">
          <div class="screen-label">需求类型</div>
          <div class="screen-span">
            <span :class="requirementData.type === '' ? 'thisCssNav' : ''" @click="selectType('')">不限</span>
            <span :class="requirementData.type === '1' ? 'thisCssNav' : ''" @click="selectType('1')">甲方需要</span>
            <span :class="requirementData.type === '2' ? 'thisCssNav' : ''" @click="selectType('2')">乙方提供</span>
          </div>
        </div>
        <div class="screen-one">
          <div class="screen-label">合作领域</div>
          <div class="screen-span">
            <span :class="requirementData.requirementDomainId.length === 0 ? 'thisCssNav' : ''" @click="selectDomain(null)">不限</span>
            <template v-for="item in listDomainList">
              <span :class="requirementData.requirementDomainId.indexOf(item.id) !== -1 ? 'thisCssNav' : ''" @click="selectDomain(item.id)">{{ item.requirementDomainName }}</span>
            </template>
          </div>
        </div>
        <div class="screen-one">
          <div class="screen-label">合作区域</div>
          <div class="screen-span">
            <span :class="requirementData.requirementAreaId.length === 0 ? 'thisCssNav' : ''" @click="selectArea(null)">不限</span>
            <template v-for="item in listAreaList">
              <span :class="requirementData.requirementAreaId.indexOf(item.id) !== -1 ? 'thisCssNav' : ''" @click="selectArea(item.id)">{{ item.requirementAreaName }}</span>
            </template>
          </div>
        </div>
      </div>
    </div>
    <!--筛选条件-->

    <!--需求列表-->
    <div class="demandList">
      <div class="demandList-con">
        <template v-if="lists.length > 0">
          <div class="one-demand" v-for="item in lists" @click="viewDetials(item.id)">
            <div class="titleTime">
              <div class="demandTitle">
                <div class="titleS"><div class="given" v-if="item.isHot=='1'">置顶</div>{{ item.type === 1 ? '我需要' : '我提供' }}{{ item.requirementTitle }}</div>
              </div>
              <div class="fast" v-if="!item.isDocking" @click.stop="dockingFun(item.id,item.type)">快速对接 ></div>
            </div>
            <div class="option">
              <div class="duijie" v-if="item.type === 1">
                <img src="@/assets/image/duijie.png" alt="">
                <span>需要</span>
              </div>
              <div class="duijie tigong" v-if="item.type === 2">
                <img src="@/assets/image/duijie1.png" alt="">
                <span>提供</span>
              </div>
              <div class="label-list">
                <span class="label-list-one" v-if="item.domainList && item.domainList.length > 0" v-for="items in item.domainList">{{ items.requirementDomainName }}</span>
                <span class="label-list-one" v-else>不限</span>
                  <label style="color: #999;font-size: 12px;margin-left: 10px">区域：</label>
                  <span class="label-list-one" v-if="item.areaList && item.areaList.length > 0" v-for="items in item.areaList">{{ items.requirementAreaName }}</span>
                  <span class="label-list-one" v-else>不限</span>
              </div>
            </div>
            <div v-if="item.isDocking" style="margin-bottom: 15px">
              <span class="Mobile" @click.stop="copy(0,item.requirementContactMobile)">{{ item.requirementContactMobile }}</span>
              <span class="Wechat" @click.stop="copy(1,item.requirementWechat)">{{ item.requirementWechat }}</span>
            </div>
            <div class="demandcon">
              <div class="ant-avatar" v-if="item.user"><img :src="item.user.avatar || 'https://www.uqudao.com/ImageCrop?src=https://www.uqudao.com/files/avatar/avatar_404.png&amp;w=50&amp;h=50'"></div>
              <div class="demandcon-text" v-if="item.user">
                <span>{{ item.user.nickname || item.user.realName }}</span>
                <template v-if="item.type === 2">
                  <span v-if="item.user.companyName">{{ item.user.companyName }} · {{ item.user.jobTitle }}</span>
                </template>
              </div>
              <div class="time">{{ item.createTime.slice(0,10) }}</div>
            </div>
          </div>
          <div style="display: flex">
            <el-pagination
                style="margin-left: auto"
                layout="prev, pager, next" :total="totalIndex" background
                :page-size="requirementData.pageSize"
                v-model:current-page="requirementData.pageNo"
                @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </template>
        <template v-else>
          <el-empty :image-size="200" />
        </template>
      </div>
    </div>
    <!--需求列表-->

    <login :dialogTableVisible="dialogTableVisible" @cancelLogin="cancelLoginFun" ref="childRef" :redirect="'https://www.qchuhai.com/#/'" />

    <bindingDom :dialogTableVisible="dialogTableVisiblePhone" @cancelLogin="cancelBinFun" />
  </div>
</template>
<script setup lang="ts">
import {Swiper, SwiperSlide} from "swiper/vue";
import login from '@/layout/components/login.vue'
import {Navigation, Pagination, Scrollbar, A11y, Autoplay} from 'swiper';
import "swiper/css";
import bindingDom from './components/binding.vue'
import 'swiper/css/pagination';
import { Search } from '@element-plus/icons-vue'
import {
  indexData,
  requirementList,
  listDomainAll,
  listAreaAll,
  requirementLimit,
  requirementDocking,
  scanLogin, userInfoApi, bindOpen
} from '@/api/api'
import { ref, nextTick } from "vue";
import { useRouter, useRoute } from 'vue-router';
import { useSysStore } from "@/store/user";
import { toRefs } from 'vue'
import {ElMessage} from "element-plus";
const { isLogin, userInfo } = toRefs(useSysStore());
const router = useRouter();
const route = useRoute();
const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay];
const dialogTableVisible = ref(false)
const dialogTableVisiblePhone = ref(false)
const needLimit = ref(0)
const provideLimit = ref(0)
const childRef = ref(null);
const onSwiper = (swiper: any) => {
  console.log(swiper);
};
interface indexDataInterface {
  banner?: any
  activity?: any
  cooperation?: any
  developer?: any
  docking?: any
}
interface ListInterface {
  requirementTitle: string
  type: number
  user: any
  createTime: string
  domainList: any
  areaList: any
  id:any
  companyName: string
  isHot: string
  jobTitle: string
  isDocking: boolean
  requirementContactMobile: string
  requirementWechat: string
}
const indexBanner = ref<indexDataInterface>({})
interface NumberArray {
  pageNo: number
  pageSize: number
  isRandom: string
  requirementTitle: string
  type: string
  requirementDomainId: string[]
  requirementAreaId: string[]
}
const requirementData = ref<NumberArray>({
  pageNo: 1,
  pageSize: 10,
  isRandom: '0',
  requirementTitle: '',
  type: '',
  requirementDomainId: [],
  requirementAreaId: []
})
const lists = ref<ListInterface[]>([])
interface InterfaceDomain {
  id: string
  requirementDomainName: string
}
interface InterfaceArea {
  id: string
  requirementAreaName: string
}
const listDomainList = ref<InterfaceDomain[]>([])
const listAreaList = ref<InterfaceArea[]>([])
const totalIndex = ref(0)
if (!isLogin.value) {
  let code = route.query.code
  let state = route.query.state
  if (code) {
    let codeForm = {
      code: code,// 关键
      state: state,
    }
    // 调微信登录的后端接口
    scanLogin(codeForm).then((res:any) => {
      if (res.code === 200) {
        nextTick(() => {
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('isLogin', String(true))
          isLogin.value = true
          sessionStorage.setItem('isBindMobile', res.data.isBindMobile)
          location.href = '/'
          ElMessage.success('登录成功')
          getUserInfo()
        })
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
}else{
  let code = route.query.code
  let state = route.query.state
  if (code) {
    let codeForm = {
      code: code,// 关键
      state: state,
    }
    bindOpen(codeForm).then((res:any) => {
      if (res.code === 200) {
        nextTick(() => {
         router.push('/my')
        })
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
}
const getUserInfo = () => {
  userInfoApi().then((res:any) => {
    userInfo.value = JSON.stringify(res.data)
    localStorage.setItem('userInfo', JSON.stringify(res.data))
  })
}
const getDomainAll = () => {
  listDomainAll().then((res:any) => {
    listDomainList.value = res.data
  })
}
getDomainAll()
const getAreaAll = () => {
  listAreaAll().then((res:any) => {
    listAreaList.value = res.data
  })
}
getAreaAll()
// 获取首页数据
const getIndexData = () => {
  indexData().then((res:any) => {
    if (res.code === 200) {
      indexBanner.value = res.data
      indexBanner.value.activity = res.data.data.activity
      indexBanner.value.cooperation = res.data.data.cooperation
      indexBanner.value.developer = res.data.data.developer
      indexBanner.value.docking = res.data.data.docking
    }
  })
}
getIndexData()
const bannerClick = (url:any) => {
  if (url) {
    window.open(url);
  }
}
const selectType = (data:any) => {
  requirementData.value.pageNo = 1
  requirementData.value.type = data
  getList()
}
const selectDomain = (data:any) => {
  requirementData.value.pageNo = 1
  if (data === null) {
    requirementData.value.requirementDomainId = []
  } else {
    if (requirementData.value.requirementDomainId.indexOf(data) === -1) {
      requirementData.value.requirementDomainId.push(data)
    } else {
      requirementData.value.requirementDomainId = requirementData.value.requirementDomainId.filter(item => item !== data);
    }
  }
  getList()
}
const selectArea = (data:any) => {
  requirementData.value.pageNo = 1
  if (data === null) {
    requirementData.value.requirementAreaId = []
  } else {
    if (requirementData.value.requirementAreaId.indexOf(data) === -1) {
      requirementData.value.requirementAreaId.push(data)
    } else {
      requirementData.value.requirementAreaId = requirementData.value.requirementAreaId.filter(item => item !== data);
    }
  }
  getList()
}
const searchFun = () => {
  requirementData.value.pageNo = 1
  getList()
}
// 获取列表数据
const getList = () => {
  requirementList(requirementData.value).then((res:any) => {
    lists.value = res.data.lists
    totalIndex.value = res.data.count
  })
}
getList()
const handleCurrentChange = (val: number) => {
  requirementData.value.pageNo = val
  getList()
}
const viewDetials = (id:any) => {
  router.push('/details?id=' + id)
}
// 获取权限数量
const getLimit = () => {
  requirementLimit().then((res:any) => {
    needLimit.value = res.data.needLimit
    provideLimit.value = res.data.provideLimit
  })
}
const cancelLoginFun = () => {
  dialogTableVisible.value = false
  if (isLogin.value) {
    getLimit()
    getList()
  }
}
const dockingFun = (id:any, type:any) => {
  if (!isLogin.value) {
    dialogTableVisible.value = true
    ElMessage.warning("请先登录！")
    return false
  }
  if (type === 1 && needLimit.value <= 0) {
    ElMessage.warning('对接次数已用尽')
    return false
  }
  if (type === 2 && provideLimit.value <= 0) {
    ElMessage.warning('对接次数已用尽')
    return false
  }
  requirementDocking({
    requirementId: id
  }).then((res:any) => {
    if (res.code === 200) {
      ElMessage.success('对接成功')
      getList()
    } else {
      ElMessage.warning(res.msg)
    }
  })
}
if (isLogin.value) {
  getLimit()
  getUserInfo()
}
const copy = (type:number, data:any) => {
  let input = document.createElement("input");
  document.body.appendChild(input);
  input.value = <string>data;
  input.select();
  try {
    let result = document.execCommand("copy");
    document.body.removeChild(input);
    if (!result) {
      console.error("复制失败");
    } else {
      ElMessage.success((type === 0 ? '手机号' : '微信号') + '复制成功');
    }
  } catch (e) {
    document.body.removeChild(input);
    alert("当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作");
  }
}
const clickPublish = () => {
  if (!isLogin.value) {
    dialogTableVisible.value = true
    ElMessage.warning("请先登录！")
    return false
  }
  router.push('/publish')
}
if (sessionStorage.getItem('isBindMobile') === 'false') {
  dialogTableVisiblePhone.value = true
}
const cancelBinFun = () => {
  dialogTableVisiblePhone.value = false
  sessionStorage.removeItem('isBindMobile')
}
</script>
<style>
.search-con{
  width: 100%;
  background: #fff;
}
.Mobile{
  background: url("@/assets/image/dianhua99.png") no-repeat center left;
  background-size: 16px;
  padding-left: 18px;
  margin-right: 15px;
  color: #999;
}
.Wechat{
  background: url("@/assets/image/weixin99.png") no-repeat center left;
  background-size: 18px;
  padding-left: 23px;
  margin-right: 15px;
  color: #999;
}
.duijie{
  display: flex;
  align-items: center;
}
.duijie img{
  width: 20px;
}
.duijie span{
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  color: #ff9820;
}
.tigong span{
  color: #409eff;
}
.fast{
  margin-left: auto;
  background: #409eff;
  color: #fff;
  padding: 5px 15px;
  border-radius: 20px;
}
.titleS{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.label-list-one{
  box-sizing: border-box;
  margin: 0 8px 0 0;
  color: #93a0ab;
  background-color: #dfe5e9;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  display: inline-block;
  height: auto;
  padding: 0 7px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  border: 1px solid #ebf5ff;
  opacity: 1;
  transition: all .3s;
  border-radius: 10px;
}
.searchBut{
  background: #409eff;
  color: #fff;
  border-radius: 60px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 45px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: none;
}
.searchBut:hover{
  border: 0;
  outline: none;
}
.searchBut:focus{
  border: 0;
  outline: none;
}
.label-list{
  margin-left: 1.25rem;
}
.option{
  display: flex;
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.demandcon{
  display: flex;
  align-items: center;
  padding-bottom: 0.75rem;
  color: #999;
}
.ant-avatar {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  background: #ccc;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
}
.demandcon-text span{
  margin-left: 0.5rem;
}
.ant-avatar img{
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.time{
  margin-left: auto;
  color: #999999;
  width: 41%;
  text-align: right;
}
.titleTime{
  display: flex;
  align-items: center;
}
.demandTitle{
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  //font-size: 0.9rem;
  line-height: 1.75rem;
  white-space: nowrap;
  width: 65%;
}
.one-demand{
  width: 100%;
  background-color: #fff;
  padding: 1.25rem;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  cursor: pointer;
  margin-bottom: 1rem;
  border-radius: 10px;
}
.one-demand:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.demandList{
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  padding-top: 0;
}
.demandList-con{
  width: 100%;
}
.screen-one{
  display: flex;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #e5eeff;
  padding-bottom: 15px;
}
.screen-one:last-child{
  border: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.screen-span span{
  cursor: pointer;
  margin: 0 8px 0 0;
  padding: 0 7px;
  font-size: 14px;
  line-height: 25px;
  color: #666;
  white-space: nowrap;
}
.screen-span span.thisCssNav{
  font-weight: bold;
  color: #409eff;
}
.screen-span{
  width: calc(100% - 4.5rem);
}
.screen-label{
  padding-right: 1rem;
  width: 3.5rem;
  color: #999;
}
.screen{
  width: 100%;
  background-color: #fff;
  padding: 20px 3%;
  box-sizing: border-box;
}
.screen-con{
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: #e5eeff;
  border-radius: 6px;
}
.statistics-index{
  background: #fff;
}
.statisticsOne{
  width: calc(50% - 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem
}
.statisticsOne:nth-child(1) {
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.statisticsOne:nth-child(2) {
  border-right: none;
  border-bottom: 1px solid #e5e7eb;
}
.statisticsOne:nth-child(3) {
  border-right: 1px solid #e5e7eb;
}
.statistics-text{
  margin-left: 1.25rem;
}
.statistics-text span{
  font-size: 1.5rem;
  line-height: 2rem;
}
.statistics-text label{
  display: block;
  color: #999999;
  margin-top: 0.5rem;
}
.search-index{
  background-color: rgba(239,243,253,1);
  border: 1px solid #dcdfe6;
  border-radius: 60px;
}
.banner img{
  max-width: 100%;
  cursor: pointer;
}
.release-button{
  border: 0;
  outline: none;
  margin-left: 1.25rem;
  font-size: 16px;
  background: #409eff;
  color: #fff;
  border-radius: 6px;
}
.release-button:focus{
  border: 0;
  outline: none;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.outline-none {
  outline: none;
  outline-offset: 2px;
  background-color: #fff;
  font-size: inherit;
  border: 0;
  font-family: inherit;
  border-radius: 60px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.items-center {
  align-items: center;
}
.max-w-main {
  max-width: 100%;
  margin: auto;
}
.statistics-con{
  max-width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.w-full {
  width: 100%;
}
.flex {
  display: flex;
}
.pc-show{
  display: none;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  width: 28px !important;
  background: #fff;
  border-radius: 4px;
  height: 5px;
}
.find_exchange {
  font-size: 28px;
  color: #409eff;
  font-weight: bold;
  font-style: italic;
}
.banner{
  width: 100%;
  margin: auto;
}
.banner-con{
  width: 100%;
  background: #fff;
  padding-top: 15px;
}
@media (min-width: 1280px) {
  .banner{
    width: 1200px;
    margin: auto;
  }
  .max-w-main, .statistics-con {
    max-width:1200px
  }
  .statistics-con{
    flex-wrap: wrap;
  }
  .statisticsOne{
    width: calc(25% - 1px);
  }
  .pc-show{
    display: inline-block;
  }
  .statisticsOne:nth-child(1) {
    border-right: 1px solid #e5e7eb;
    border-bottom: 0;
  }
  .statisticsOne:nth-child(2) {
    border-right: 1px solid #e5e7eb;
    border-bottom: 0;
  }
  .statisticsOne:nth-child(3) {
    border-right: 1px solid #e5e7eb;
  }
  .screen-con{
    width: 1200px;
    padding: 20px;
    box-sizing: border-box;
    margin: auto;
  }
  .screen-span{
    width: calc(100% - 7rem);
  }
  .screen-label{
    padding-right: 1rem;
    width: 6rem;
    font-weight: 700;
  }
  .demandList-con{
    width: 1200px;
    margin: auto;
  }
  .find_exchange {
    margin-right: 50px;
  }
  .given {
    color: #fff;
    padding: 2px 8px;
    margin-right: 13px;
    border-radius: 4px;
    background-color: #f70202;
    display: inline-block;
    position: relative;
    font-size: 12px;
    height: 1.1rem;
    line-height: 20px;
  }
}
</style>